import React, { Component } from 'react';
import { connect } from "react-redux";
import { getUserInfoAction } from "../../store/actions/SettingAction"
import { withRouter } from "react-router-dom"
import "./SetPassword.scss"
import store from "../../store"
import { Toast } from "antd-mobile"
import { undatePsw } from "../../data/set"

class SetPassword extends Component {
  state = {
    username: '',
    clear1: '',
    clear2: '',
    clear3: '',
    UpdatePwd1: '',
    UpdatePwd2: '',
    UpdatePwd3: '',
    pastPwd: '',
    clear: ''
  }

  changePsw1 = async (e) => {
    await this.setState({
      UpdatePwd1: e.target.value
    })
    if (this.state.UpdatePwd1 !== '') {
      await this.setState({
        clear: 'appear1'
      })
    }
  }
  changePsw2 = async (e) => {
    await this.setState({
      UpdatePwd2: e.target.value
    })
    if (this.state.UpdatePwd2 !== '') {
      await this.setState({
        clear: 'appear2'
      })
    }
  }
  changePsw3 = async (e) => {
    await this.setState({
      UpdatePwd3: e.target.value
    })
    if (this.state.UpdatePwd3 !== '') {
      await this.setState({
        clear: 'appear3'
      })
    }
  }
  blur = async () => {
    await this.setState({
      clear: ''
    })
  }
  clearname = async (index) => {
    if (index === 'clear1') {
      if (this.state.UpdatePwd1 !== '') {
        await this.setState({
          UpdatePwd1: ''
        })
      }
    } else if (index === 'clear2') {
      if (this.state.UpdatePwd2 !== '') {
        await this.setState({
          UpdatePwd2: ''
        })
      }
    } else {
      if (this.state.UpdatePwd3 !== '') {
        await this.setState({
          UpdatePwd3: ''
        })
      }
    }
  }
  handlechange = async (index) => {
    if (index === 1) {
      if (this.state.UpdatePwd1 !== '') {
        await this.setState({
          clear: 'appear1'
        })
      }
    } else if (index === 2) {
      if (this.state.UpdatePwd2 !== '') {
        await this.setState({
          clear: 'appear2'
        })
      }
    } else {
      if (this.state.UpdatePwd3 !== '') {
        await this.setState({
          clear: 'appear3'
        })
      }
    }
  }
  toSet = () => {
    this.props.history.push('set')
  }
  submitName = async () => {
    if (this.state.UpdatePwd2 === this.state.UpdatePwd3) {
      let ps1 = this.state.UpdatePwd1
      let ps2 = this.state.UpdatePwd2
      let ps3 = this.state.UpdatePwd3
      // await undatePsw(ps1, ps2, ps3)
      this.props.history.push('index')
      localStorage.setItem('token', '')
      localStorage.setItem('user', '')
    } else {
      Toast.info('新密码前后不一致')
    }
  }

  render() {
    return (
      <div className="setUpdatePwd">
        <div className="UPTitle">
          <div className="titleBack" onClick={this.toSet}><i className="iconfont icon-youjiankuohao"></i></div>
          <div className="titlecontent">修改密码</div>
          <div className="titleBlock"></div>
        </div>
        <div className="UPPast">
          <div className="UPLeft">
            <i>*</i>
            <span>旧密码</span>
          </div>
          <input onBlur={this.blur} placeholder="请输入" type="text" onClick={this.handlechange.bind(this, 1)} className="UPRight" value={this.state.UpdatePwd1} onChange={this.changePsw1}></input>
          <div className={this.state.clear === "appear1" ? 'clear appear' : 'clear'}>
            <span onClick={this.clearname.bind(this, 'clear1')}>X</span>
          </div>
        </div>
        <div className="UPNew">
          <div className="UPLeft">
            <i>*</i>
            <span>新密码</span>
          </div>
          <input onBlur={this.blur} placeholder="请输入" type="text" onClick={this.handlechange.bind(this, 2)} className="UPRight" value={this.state.UpdatePwd2} onChange={this.changePsw2}></input>
          <div className={this.state.clear === "appear2" ? 'clear appear' : 'clear'}>
            <span onClick={this.clearname.bind(this, 'clear2')}>X</span>
          </div>
        </div>
        <div className="UPChick">
          <div className="UPLeft">
            <i>*</i>
            <span>确认密码</span>
          </div>
          <input onBlur={this.blur} placeholder="请输入" type="text" onClick={this.handlechange.bind(this, 3)} className="UPRight" value={this.state.UpdatePwd3} onChange={this.changePsw3}></input>
          <div className={this.state.clear === "appear3" ? 'clear appear' : 'clear'}>
            <span onClick={this.clearname.bind(this, 'clear3')}>X</span>
          </div>
        </div>
        <div className="submit" onClick={this.submitName}>确定</div>
      </div >

    );
  }

  async componentDidMount() {
    await store.dispatch(getUserInfoAction())
  }
}
const mapStateToProps = (state) => {
  return {
    userMessage: state.SettingReducer.userMessage,
  }
}

export default connect(mapStateToProps, null)(withRouter(SetPassword));
